<!--
 * @Author: lsjweiyi 759209794@qq.com
 * @Date: 2023-03-18 17:14:17
 * @LastEditors: lsjweiyi 759209794@qq.com
 * @LastEditTime: 2024-05-15 22:28:45
 * @FilePath: \web-ssg\pages\menu\myMenu.vue
 * @Description: 页面入口
-->
<template>
    <div>
        <n-layout>
            <n-layout-header ref="topMenu" bordered
                style="padding-right: 10px; display: inline-flex; justify-content: space-between; align-items: center">
                <div style="display: inline-flex;align-items: center">
                    <div :style="{ 'min-width': LeftMenuW }"
                        style="display: inline-flex; align-items: center; justify-content: space-between">
                        <img src="/images/title.png" />
                    </div>
                    <n-menu :value="topMenuKey" :options="topMenuOptions" mode="horizontal" style="font-size: 20px;"
                        :router="true"> </n-menu>
                </div>
                <div class="font rainbowText">
                    <div>解决您零散的需求！</div>
                    <div>极简AI工具箱 toolsj.cn</div>
                </div>
                <div style="display: inline-flex; align-items: center">
                    <div style="min-width: max-content;margin-right: 15px;">
                        <div>无需注册！无需登录！无需会员！</div>
                        <div>价格低廉，按次计费，明码标价！</div>
                        <div>无需任何个人信息，确保您的信息安全！</div>
                    </div>
                    <Customer></Customer>
                </div>


            </n-layout-header>
            <n-layout has-sider :style="bodyH">
                <n-layout-sider bordered collapse-mode="transform" show-trigger="arrow-circle" :collapsed-width="10"
                    :width="LeftMenuW" style="height: 100%" v-if="leftMenuOption?.length">
                    <n-menu :value="($route.name as string)" :options="leftMenuOption" />
                </n-layout-sider>
                <n-layout-content
                    style="background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(237,252,237,1) 100%);">
                    <NuxtPage keepalive />
                </n-layout-content>
            </n-layout>
            <n-layout-footer style="display: flex; justify-content: center; align-items: center; height: 30px">
                <div style="display: inline-flex">
                    <span>Copyright ©2024 凡松网络技术 保留所有权利</span>
                    <n-divider vertical />
                    <a href="https://beian.miit.gov.cn/"> 粤ICP备2024244651号</a>
                    <n-divider vertical />
                    <img src="/images/gaba.png" style="width: 20px; height: 20px; margin-right: 5px" />
                    <a href="https://beian.mps.gov.cn/#/query/webSearch?code=44022402000135" rel="noreferrer"
                        target="_blank">粤公网安备44022402000135号</a>
                </div>
            </n-layout-footer>
        </n-layout>
    </div>
</template>

<script lang="ts" setup>
import type { MenuOption } from "naive-ui";
import { RouterLink } from "vue-router";
import Customer from "./components/customer.vue";

const LeftMenuW = leftMenuWidth().value;

// 创建顶部导航栏options
const topMenuOptions = createMenuOption(topMenuList);

// 初始化左侧导航栏的options
const leftMenuOptionList: Map<string, MenuOption[]> = new Map();
topMenuList.forEach((item) => {
    if (leftMenuList.has(item.routerName)) {
        leftMenuOptionList.set(item.routerName, createMenuOption(leftMenuList.get(item.routerName)));
    }
});

// 根据数组信息返回导航栏的options
function createMenuOption(menuList: MenuItem[] | undefined): MenuOption[] {
    if (!menuList) return [];
    const options: MenuOption[] = [];
    menuList.forEach((item) => {
        options.push({
            label: () =>
                h(
                    RouterLink,
                    {
                        to: {
                            path: (() => {
                                if (item.key === "index") {
                                    return "/";
                                } else if (item.key === "") {
                                    return "/" + item.routerName;
                                } else if (item.routerName === "") {
                                    return "/" + item.key;
                                } else {
                                    return "/" + item.key + "/" + item.routerName;
                                }
                            })(),
                        },
                    },
                    { default: () => item.name }
                ),
            key: (() => {
                if (item.key === "index") {
                    return "index";
                } else if (item.key === "") {
                    return item.routerName;
                } else if (item.routerName === "") {
                    return item.key;
                } else {
                    return item.key + "-" + item.routerName;
                }
            })(),
        });
    });
    return options;
}
const topMenuKey = useTopMenuKey();
// 计算当前路由到哪个页面下，好点亮该页面
const leftMenuOption = computed(() => {
    return leftMenuOptionList.get(topMenuKey.value);
});

const bodyH = ref("height: 100%");

const topMenu = ref(); //顶部导航栏对象
onMounted(() => {
    // 获取当前域名，方便后面使用
    baseUrlKey().value = window.location.origin.replace("10000", "80").replace("localhost", "127.0.0.1") + "/tools";
    // 获取高度，方便后面空间计算自己的高度
    let timer = setInterval(function () {
        if (document.readyState === "complete") {
            bodyH.value = "height:" + (document.documentElement.clientHeight - topMenu.value?.$el.offsetHeight - 30 - 5) + "px";
            window.clearInterval(timer);
        }
    }, 100);
});
useSeoMeta({
    description: "一个致力于极致简单使用的AI工具箱，无需登录，无需下载。提供各种图像处理、文字处理等AI功能。而且真的很便宜！",
});
useHead({
    titleTemplate: "%s | 极简AI工具箱",
});
</script>
<style>
.font {
    font-family: "Work Sans", sans-serif;
    font-weight: 800;
    font-size: 20px;
}


/* Style the rainbow text element. */
.rainbowText {
    /* Create a conic gradient. */
    /* Double percentages to avoid blur (#000 10%, #fff 10%, #fff 20%, ...). */
    background: #CA4246;
    background-color: #CA4246;
    background: conic-gradient(#CA4246 16.666%,
            #E16541 16.666%,
            #E16541 33.333%,
            #F18F43 33.333%,
            #F18F43 50%,
            #8B9862 50%,
            #8B9862 66.666%,
            #476098 66.666%,
            #476098 83.333%,
            #A7489B 83.333%);

    /* Set thee background size and repeat properties. */
    background-size: 57%;
    background-repeat: repeat;

    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>
